<!DOCTYPE html>

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyGO!!!!! 介绍</title>
  <link rel="stylesheet" href="Test.css">
</head>
<body>
<!-- 侧边导航栏 -->
<nav class="sidebar">
  <ul>
    <li><a href="#intro">简介</a></li>
    <li><a href="#characters">人物介绍</a></li>
    <li><a href="#gallery">图片展示</a></li>
    <li><a href="#about">关于作品</a></li>
  </ul>
</nav>

<!-- 主要内容区域 -->
<main>
  <!-- 简介部分 -->
  <section id="intro" class="section intro-section">
    <h1>MyGO!!!!!</h1>
    <p>
      《MyGO!!!!!》是一部以音乐为主题的原创动画，讲述了一群少女通过音乐寻找自我、建立友谊的故事。
      作品以其深刻的情感描写和精彩的音乐表演赢得了观众的喜爱。
    </p>
  </section>

  <!-- 人物介绍部分 -->
  <section id="characters" class="section characters-section">
    <h2>人物介绍</h2>
    <div class="character-card">
      <img src="https://via.placeholder.com/150" alt="Aoi" class="character-img">
      <h3>青葉（Aoi）</h3>
      <p>乐队的主唱，性格开朗，热爱音乐，总是充满活力。</p>
    </div>
    <div class="character-card">
      <img src="https://via.placeholder.com/150" alt="Rin" class="character-img">
      <h3>鈴（Rin）</h3>
      <p>乐队的吉他手，技术高超，性格冷静，是团队的核心。</p>
    </div>
    <div class="character-card">
      <img src="https://via.placeholder.com/150" alt="Yuki" class="character-img">
      <h3>雪（Yuki）</h3>
      <p>乐队的键盘手，性格内向，但内心充满热情。</p>
    </div>
    <div class="character-card">
      <img src="https://via.placeholder.com/150" alt="Momo" class="character-img">
      <h3>桃（Momo）</h3>
      <p>乐队的鼓手，性格活泼，总是为团队带来欢乐。</p>
    </div>
  </section>

  <!-- 图片展示部分 -->
  <section id="gallery" class="section gallery-section">
    <h2>图片展示</h2>
    <div class="gallery-container">
      <img src="https://via.placeholder.com/400x300" alt="Gallery Image 1" class="gallery-img">
      <img src="https://via.placeholder.com/400x300" alt="Gallery Image 2" class="gallery-img">
      <img src="https://via.placeholder.com/400x300" alt="Gallery Image 3" class="gallery-img">
    </div>
  </section>

  <!-- 关于作品部分 -->
  <section id="about" class="section about-section">
    <h2>关于作品</h2>
    <p>
      《MyGO!!!!!》通过音乐和友情的故事，探讨了青春期的困惑与成长。
      作品以其精美的画面、动人的音乐和深刻的情感描写，成为一部值得一看的佳作。
    </p>
  </section>
  <a href="javascript:history.back()">返回</a>
</main>

<!-- 页脚 -->
<footer>
  <p>&copy; 2023 MyGO!!!!! 介绍页面. 所有图片和内容仅供参考。</p>
</footer>
</body>
</html>